<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@ include file="header.jsp"%>
<script src="${path}/static/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main1" style="width: 600px;height:400px;"></div>
    <div id="main2" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById('main1'));
      var myChart2 = echarts.init(document.getElementById('main2'));
      
      $.ajax({
    	  url: '${path}/user?method=selectDeptCount',
    	  type: 'POST',
    	  dataType: 'json',
    	  success: function(jsonList) {
    		  console.log(jsonList)
    	      
    	      var option1 = {
   	    		  title: {
   	    		    text: '统计部门人数',
   	    		    subtext: 'Fake Data',
   	    		    left: 'center'
   	    		  },
   	    		  tooltip: {
   	    		    trigger: 'item'
   	    		  },
   	    		  legend: {
   	    		    orient: 'vertical',
   	    		    left: 'left'
   	    		  },
   	    		  series: [
   	    		    {
   	    		      name: 'Access From',
   	    		      type: 'pie',
   	    		      radius: '50%',
   	    		      data: jsonList,
   	    		      emphasis: {
   	    		        itemStyle: {
   	    		          shadowBlur: 10,
   	    		          shadowOffsetX: 0,
   	    		          shadowColor: 'rgba(0, 0, 0, 0.5)'
   	    		        }
   	    		      }
   	    		    }
   	    		  ]
   	    		};
    	     myChart1.setOption(option1);
    	      
    	     
    	     //柱状图
    	     var xArray = new Array();
    	     var yArray = new Array();
    	     for(var i = 0; i < jsonList.length; i++) {
    	    	 xArray.push(jsonList[i].name);
    	    	 yArray.push(jsonList[i].value);
    	     }
    	     
      	     var option2 = {
      	        title: {
      	          text: '部门人数统计'
      	        },
      	        tooltip: {},
      	        legend: {
      	          data: ['人数']
      	        },
      	        xAxis: {
      	          data: xArray
      	        },
      	        yAxis: {},
      	        series: [
      	          {
      	            name: '销量',
      	            type: 'bar',
      	            data: yArray
      	          }
      	        ]
      	      }; 
      	      myChart2.setOption(option2);
    	  }
      })

      
    </script>
</body>
</html>